<!DOCTYPE HTML>
<html>
<head>
    <title>退单列表</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link href="../../../assets/css/dpl-min.css" rel="stylesheet" type="text/css"/>
    <link href="../../../assets/css/bui-min.css" rel="stylesheet" type="text/css"/>
    <link href="../../../assets/css/page-min.css" rel="stylesheet" type="text/css"/>
    <link href="../../../assets/css/jx-style.css" rel="stylesheet" type="text/css"/>
    <link href="../../../assets/css/prettify.css" rel="stylesheet" type="text/css"/>
</head>

<body>
<div class="container">
    <div class="detail-page">
        <div class="detail-page-title">
            <h4>采购退单列表</h4>
        </div>
        <div class="detail-section">
            <div class="detail-row">
                <div class="jx-search-container">
                    <form id="searchForm" class="form-horizontal jx-form jx-form-thin">
                        <input type="hidden" name="orderStatus" id="orderStatus">
                        <div class="row">
                            <div class="control-group span7">
                                <label class="control-label first">售后编号:</label>
                                <div class="controls">
                                    <input name="returnCode" type="text" class="control-text">
                                </div>
                            </div>
                            <div class="control-group span7">
                                <label class="control-label">关联订单号:</label>
                                <div class="controls">
                                    <input name="orderCode" type="text" class="control-text">
                                </div>
                            </div>
                            <div class="control-group span7">
                                <label class="control-label">会员账号:</label>
                                <div class="controls">
                                    <input name="userPhone" type="text" class="control-text">
                                </div>
                            </div>
                            <div class="control-group span2 pull-right">

                                <button type="submit" class="jx-btn btn-default">搜索</button>

                            </div>
                        </div>
                        <div class="row">
                            <div class="control-group span8">
                                <label class="control-label">供应商:</label>
                                <div class="controls">
                                    <input name="supplierName" type="text" class="control-text">
                                </div>
                            </div>
                            <div class="control-group span8">
                                <label class="control-label first">订单类型:</label>
                                <div class="controls">
                                    <select name="orderType" class="normal-control">
                                        <option value="">请选择</option>
                                        <option value="1">采购</option>
                                        <option value="2">分销</option>
                                    </select>
                                </div>
                            </div>
                            <div class="control-group span10">
                                <label class="control-label first">申请时间:</label>
                                <div class="controls">
                                    <input type="text" name="beginReturnDate"
                                           class="calendar calendar-time input-medium"><span> - </span>
                                    <input type="text" name="endReturnDate" class="calendar calendar-time input-medium"><span> </span>
                                </div>
                            </div>

                        </div>
                    </form>
                </div>


                <div id="tab"></div>
                <div id="panel" class="">
                    <div>
                        <div id="grid"></div>
                        <div></div>
                        <div></div>
                    </div>
                </div>
            </div>
            <!-- 表格 start-->
            <!--   <div id="grid"></div> -->
            <!-- 表格 end-->
        </div>
    </div>
</div>
<script type="text/javascript" src="../../../assets/js/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="../../../assets/js/bui-min.js"></script>
<script type="text/javascript" src="../../../assets/js/config-min.js"></script>
<script type="text/javascript">
    BUI.use('common/page');
</script>
<!-- script start -->
<script>
    BUI.use(['bui/grid', 'bui/data', 'bui/tab', 'bui/calendar', 'common/search'], function (Grid, Data, Tab, Calendar, Search) {
        var Grid = Grid,
            Store = Data.Store,
            columns = [{
                title: '售后退单号',
                dataIndex: 'a',
                elCls: 'center', //居中
                width: 100
            }, {
                title: '售后状态 ',
                elCls: 'center',
                dataIndex: 'b',
                width: 100
            }, {
                title: '关联订单号',
                elCls: 'center',
                dataIndex: 'c',
                width: 100
            }, {
                title: '订单状态',
                elCls: 'center',
                dataIndex: 'd',
                width: 100
            }, {
                title: '订单类型',
                elCls: 'center',
                dataIndex: 'e',
                width: 100
            }, {
                title: '会员ID',
                dataIndex: 'f',
                elCls: 'center',
                width: 100
            }, {
                title: '会员手机号',
                dataIndex: 'g',
                elCls: 'center',
                width: 100
            }, {
                title: '供应商',
                dataIndex: 'h',
                elCls: 'center',
                width: 100
            }, {
                title: '申请时间',
                dataIndex: 'i',
                elCls: 'center',
                width: 100
            }, {
                title: '商品货号',
                dataIndex: 'j',
                elCls: 'center',
                width: 100
            }, {
                title: '商品名称',
                dataIndex: 'k',
                elCls: 'center',
                width: 100
            }, {
                title: '颜色',
                dataIndex: 'l',
                elCls: 'center',
                width: 100
            }, {
                title: '尺码',
                dataIndex: 'm',
                elCls: 'center',
                width: 100
            }, {
                title: '条形码',
                dataIndex: 'n',
                elCls: 'center',
                width: 100
            }, {
                title: '均摊销售价/件',
                dataIndex: 'o',
                elCls: 'center',
                width: 100
            }, {
                title: '数量',
                dataIndex: 'p',
                elCls: 'center',
                width: 100
            }, {
                title: '可退款金额',
                dataIndex: 'q',
                elCls: 'center',
                width: 100
            }, {
                title: '售后原因',
                dataIndex: 'r',
                elCls: 'center',
                width: 100
            }, {

                title: '操作',
                dataIndex: 'h',
                elCls: 'center',
                width: 200,
                renderer: function (value, obj) {
                    var editStr = Search.createLink({ //链接使用 此方式
                        id: 'edit' + obj.id,
                        title: '售后退单详情',
                        text: '[ 查看详情 ] ',
                        href: 'templates/after-sales/cancel-order-list/cancel-order-detail.html'
                    })

                    return editStr;
                }
            }],
            data = [{
                a: '1670459776784980 ',
                b: '待审核',
                c: '1691302828384980',
                d: '待发货',
                e: '分销订单',
                f: 'JX4714678',
                g: '15900684377',
                h: '激想',
                i: '2016/8/3 11:31',
                j: '685139 ',
                k: 'NIKE男鞋跑步鞋',
                l: '统色',
                m: '5.5 ',
                n: '578146716591',
                o: '358.00',
                p: '2',
                q: '348.00',
                r: '缺货'

            }];
        var datepicker = new Calendar.DatePicker({
            trigger: '.calendar',
            autoRender: true
        });
        var store = new Store({ //初始化数据
                data: data,
                pageSize: 2 // 配置分页数目
            }),
            grid = new Grid.Grid({
                render: '#grid',
                elCls: 'small-bui-grid-table',
                columns: columns,

                bbar: {
                    // pagingBar:表明包含分页栏
                    pagingBar: true
                },
                store: store
            }),
            tab = new Tab.TabPanel({
                render: '#tab',
                elCls: 'nav-tabs',
                panelContainer: '#panel', //如果内部有容器，那么会跟标签项一一对应，如果没有会自动生成
                //selectedEvent : 'mouseenter',//默认为click,可以更改事件
                autoRender: true,
                children: [{
                    title: '待审核',
                    value: '1',
                    selected: true
                }, {
                    title: '等待回寄',
                    value: '2',
                    panelContent: '<p>等待回寄</p>'
                }, {
                    title: '已寄回',
                    value: '3',
                    panelContent: '<p>已寄回</p>'

                }, {
                    title: '审核通过',
                    value: '4',
                    panelContent: '<p>审核通过</p>'

                }, {
                    title: '已退款',
                    value: '5',
                    panelContent: '<p>已退款</p>'

                }, {
                    title: '已拒绝',
                    value: '6',
                    panelContent: '<p>已拒绝</p>'

                }, {
                    title: '已撤消',
                    value: '7',
                    panelContent: '<p>已撤消</p>'

                }, {
                    title: '全部',
                    value: '8',
                    panelContent: '<p>自定义内部信息</p>'

                }]
            });
        tab.on('selectedchange', function (ev) {
            var item = ev.item;
            /*切换tab之后显示相应数据*/

        });
        tab.setSelected(tab.getItemAt(0));
        grid.render();
    });
</script>
<!-- script end -->
</body>

</html>
